<template>
    <view class="index">

        <view class="main">
            <!-- 分类 -->
            <!--            <u-grid  :border="false" col="5">
                            <u-grid-item v-for="(listItem,listIndex) in typeList" :key="listIndex" @click="handlerType(listIndex)">
                                <u-icon :customStyle="{paddingTop:10+'rpx'}" :name="listItem.url" :size="40"></u-icon>
                                <text class="grid-text">{{listItem.configName}}</text>
                            </u-grid-item>
                        </u-grid>-->
            <view class="m_t_20 m_b_20">
                <u-subsection :list="subsectionList" :current="current" mode="button" @change="sectionChange"></u-subsection>
            </view>

            <u-tabs :list="typeList" keyName="configName" @click="changeType" :current="currentIndex"></u-tabs>

            <view class="dis_f_l_c">
                <u-tabs :list="tabsList" @click="handleTab"></u-tabs>
            </view>
            <view class="dis_f_r_c">
                <view class="m_r_10">
                    <uni-data-picker :localdata="areaList" placeholder="请选择地区" popup-title="请选择地区" @change="onchange" @clear="handleClear('area')" @nodeclick="onnodeclick"></uni-data-picker>
                </view>
                <!--                <uni-data-picker :localdata="pickerTypeList" popup-title="请选择分类" @change="onTypeChange" @clear="handleClear('class')" @nodeclick="onnodeclick"></uni-data-picker>-->
            </view>
        </view>
        <s-goods :goodsList="list"></s-goods>
        <s-empty v-if="list.length===0"></s-empty>
        <view class="wrap">
            <u-back-top :scroll-top="scrollTop"></u-back-top>
        </view>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>

<script>
import {imgUrl} from "@/sheep/request/baseUrl"
import {getInformationListApi,getByKeyApi,getAreaListApi,getAddressApi } from "@/sheep/api/index";
import {myMixins} from "@/mixins/myMixins";
export default {
    mixins:[myMixins],
    data() {
        return {
            currentIndex: 0,
            isShowPrice:false,
            myInfoVo:{},
            timer: null,
            titleHeight: 0,
            customTop: 0,
            scrollTop: 0,
            unSign: false,
            banner: [],
            typeList: [],
            windowHeight: uni.getSystemInfoSync().windowHeight,
            list:[],
            subsectionList:['招聘','求职'],
            current:0,
            curNow:'',
            notice:'',
            tabsList:[{name: '最新'},{name: '附近',}],
            items: [],
            areaList:[],
            pickerTypeList:[],
            queryObj:{
                px:'最新'
            },
        };
    },
    onLoad(options) {
        console.log("options", options);
        this.current = options.current;
        if (options.remark){
            let nameList =options.remark.split('-')
            console.log("nameList", nameList);
            this.typeList = nameList.map(item=>{
                return {
                    configName:item
                }
            })
            this.queryObj.lxNameEj = this.typeList[0].configName
        }
        this.getArea()
        this.queryObj.lat = uni.getStorageSync('latitude')
        this.queryObj.lot = uni.getStorageSync('longitude')
        this.getList()
    },
    onReady() {},
    onShow(options) {
    },
    methods: {
        getList(){
            console.log("this.queryObj", this.queryObj);
            this.queryObj.type=Number(this.current)+1
            getInformationListApi(this.queryObj).then(res=>{
                this.list = this.list.concat(res.rows)
                this.total = res.total
                if (this.queryObj.pageNum*this.queryObj.pageSize<this.total){
                    this.status = 'loadmore'
                }else{
                    this.status = 'nomore'
                }
                uni.stopPullDownRefresh()
            })
        },
        changeType(type) {
            console.log("type", type);
            this.currentIndex = type.index;
            this.queryObj.lxNameEj = this.typeList[type.index].configName;
            this.updateData()
        },

        getArea(){
            getAreaListApi().then(res=>{
                this.areaList = this.filterAreaName(res.data)
            })
        },
        sectionChange(index) {
            this.curNow = index;
            this.current = index;
            this.updateData()
        },
        handleTab(item){
            console.log("item", item);
            this.queryObj.px=item.name
            // if (item.index==1){
            //     this.queryObj.lat=this.latitude
            //     this.queryObj.lot=this.longitude
            // }else{
            //     this.queryObj.lat=''
            //     this.queryObj.lot=''
            // }
            this.updateData()
        },
        onchange(e) {
            const value = e.detail.value
            if (value.length>0){
                this.queryObj.dz = value[2].text
            }else{
                this.queryObj.dz = ''
            }
            this.updateData()
        },
        onTypeChange(e){
            console.log(e);
            this.queryObj.flId=e.detail.value[0].value
            this.updateData()
        },
        handleClear(type){
            if (type==='area'){
                this.queryObj.area = ''
            }
            if (type==='class'){
                this.queryObj.type = ''
            }
            this.updateData()
        },

        filterAreaName(data){
            // if(!(data?.length <= 0)){
            // 等价于
            if(!data || data.length <= 0){ // 递归的出口
                return null;
            }
            return data.map(x => { // 循环数据
                const model = { // 把后端返回过来的数据里面的键给替换成我想要的键
                    children: x.children,
                    text: x.name,
                    value: x.areaCode,
                };
                const children = this.filterAreaName(x.children); // 子级数据

                if(children){ // 一直往下循环查找有没有children这个键，如果有就直接添加一个子级字段名，这个字段名就是存子级数据
                    model.children = children;
                }
                return model; // 返回这个数据
            })
        },
        onnodeclick(node) {},

        handleToInfo(item){
            uni.navigateTo({
                url: '/pages/index/info'
            })
        },
        updateData(data){
            this.queryObj.pageNum = 1
            this.total = 0
            this.status = 'loadmore'
            this.list = []
            this.getList()
        },

        // 获取微信右上角胶囊高度
        getHeight() {
            let res = uni.getMenuButtonBoundingClientRect();
            this.titleHeight = res.top + res.height + 16;
            this.customTop = res.top + 3;
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        /*     async getTypeList() {
                 let res = await getByKeyApi("goods_type");
                 this.typeList = res.data;
                 this.queryObj.flId = this.typeList[this.currentIndex].businessConfigId;
                 this.updateData()
             },*/
    },
};
</script>

<style lang="scss" scoped>
.index {
    .custom {
        position: absolute;
        left: 30rpx;
        font-size: 40rpx;
        font-weight: bolder;
    }
    .main {
        padding: 0 30rpx;
        .header {
            display: flex;
            padding: 42rpx 0;
            color: #fff;
            justify-content: space-between;
            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: url("https://gsdq-1329143881.cos.ap-beijing.myqcloud.com/indexbg.png")
                no-repeat;
                background-size: 100% auto;
                z-index: -2;
            }
            .search-box {
                // background-color: #fff;
                border: #000 1rpx solid;
                border-radius: 40rpx;
                width: 100%;
                height: 70rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 5rpx 0 30rpx;
                color: #999;
                font-size: 26rpx;
                .search-icon {
                    background-color: #000;
                    border-radius: 40rpx;
                    color: #fff;
                    height: 60rpx;
                    width: 120rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        .view {
            position: relative;
            .view-son {
                position: absolute;
                bottom: -5%;
                z-index: -1;
            }
        }
        .grid-text {
            font-size: 12px;
            color: #333;
            padding: 10rpx 0 20rpx 0rpx;
            box-sizing: border-box;
        }
        .goods-box {
            background: #af5858;
            height: 25px;
            border-radius: 4px;
        }
    }
    //瀑布流
    .load-txt {
        padding: 0 0 20rpx 0;
        text-align: center;
        color: #999;
        font-size: 24rpx;
    }
    .load-icon {
        width: 300rpx;
        height: 300rpx;
        margin: 0 auto 20rpx auto;
        display: block;
    }
}
</style>
